<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/technicianSurfaceDay'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="日期：">
            <el-date-picker
              @change="chageDate"
              value-format="yyyy-MM-dd"
              v-model="date"
              style="width: 250px"
              type="daterange"
              range-separator="到"
              start-placeholder="开始日期"
              placeholder="请选择"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="门店：">
            <el-select
              v-model="paging.store_id"
              placeholder="请选择"
              style="width: 250px"
              @change="changesStore"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工：" v-if="paging.store_id">
            <el-select
              style="width: 250px"
              clearable
              v-model="paging.staff_id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in staffList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="等级：">
            <el-select
              style="width: 250px"
              clearable
              v-model="paging.position_id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in getTechPositionList"
                :key="item.id"
                :label="item.grade"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <el-button
            icon="el-icon-upload2"
            @click="exportFile()"
            :loading="isExport"
            >导出</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
          show-summary
          :summary-method="getTotal"
          max-height="650"
        >
          <el-table-column prop="date" label="日期" min-width="150">
          </el-table-column>
          <el-table-column prop="code" label="门店" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.store.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="员工" min-width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.staff">{{ scope.row.staff.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="工号" min-width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.staff">{{ scope.row.staff.number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="等级" min-width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.staff">{{
                scope.row.staff.grade
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="提成制度" min-width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.royalty_info">{{
                scope.row.royalty_info.title
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="base_money" label="基础提成" min-width="150">
          </el-table-column>
          <el-table-column prop="clock_money" label="点钟费" min-width="150">
          </el-table-column>
          <el-table-column prop="attach_money" label="附加提成" min-width="150">
          </el-table-column>

          <el-table-column prop="shape_money" label="提成金额" min-width="150">
          </el-table-column>
          <el-table-column prop="price" label="操作">
            <template slot-scope="scope">
              <span @click="setRow(scope.row)" class="tab-table-text"
                >查看</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      date: [],
      paging: {
        date_start: "",
        date_end: "",
        store_id: "",
        staff_id: "",
        position_id: "",
      },
      tableData: [],
      storeList: [],
      staffList: [],
      getTechPositionList: [],
      isExport: false,
    };
  },
  created() {
    let {store_id,staff_id,position_id,month} = this.$route.query;
    this.paging.store_id = store_id * 1;
    this.paging.staff_id = staff_id * 1;
    this.paging.position_id = position_id * 1;
    if(month){
        this.paging.date_start = `${month}-01`;
        let date = month.split("-");
        this.paging.date_end = this.utils.getNowDate(new Date(date[0],date[1],0), true);
        this.date = [`${month}-01`,this.paging.date_end]
    }else this.getDate();
    this.homegetStaff();
    this.getAllStoreList();
    this.getTechPosition();
    this.repairGetList();
  },
  methods: {
    // 导出文件
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportTechShapeDay(this.paging);
      this.utils.downloadXlsx(res, "技师提成列表（日汇总）");
      this.isExport = false;
    },
    getTotal(param) {
      const { columns, data } = param;
      const sums = [];
      console.log(columns, data);
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        //calcProp 为需要计算的列的prop值的集合
        const calcProp = [
          "base_money",
          "attach_money",
          "clock_money",
          "shape_money",
        ];
        if (calcProp.includes(column.property)) {
          const values = data.map((item) => Number(item[column.property]));
          console.log(values, "values");
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              console.log(2);
              return prev;
            }
          }, 0);
        }
      });
      let arr = [];
      sums.forEach((ele, i) => {
        if (i != 0) {
          sums[i] = Number(ele).toFixed(2);
        }
        // console.log(ele,"444444444")
        // ele = ele.toFixed(2)
      });
      console.log(sums, "sumssumssumssumssumssumssumssums");
      return sums;
    },
    chageDate(e) {
      this.paging.date_start = e?.[0];
      this.paging.date_end = e?.[1];
    },
    //   选择门店联动技师
    changesStore() {
      this.paging.staff_id = "";
      this.homegetStaff();
    },
    //   获取当月第一天和当天
    getDate() {
      var date = new Date();
      let date2 = new Date();
      date.setDate(1);
      var dateStart =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      var dateEnd = this.utils.getNowDate(date2, true);
      this.paging.date_start = dateStart;
      this.paging.date_end = dateEnd;
      this.date = [dateStart, dateEnd];
    },
    changeDate(e) {
      this.paging.month = this.utils.timeMonth(e);
    },
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.storeList = data;
      }
    },
    // 获取技师等级
    async getTechPosition() {
      let { code, data } = await this.$Http.getTechPosition();
      if (code) {
        this.getTechPositionList = data;
      }
    },
    // 获取所有技师
    async homegetStaff() {
      let { code, data } = await this.$Http.homegetStaff({
        store_id: this.paging.store_id,
      });
      if (code) {
        this.staffList = data;
      }
    },
    async setRow(row) {
      console.log(row, "row11111111");
      let params = {
        id: row.staff.id,
        store_id: row.store_id,
        date: this.date,
      };
      this.utils.goUrl(
        `/technicianSurfaceInfo?params=${JSON.stringify(params)}`
      );
    },
    async repairGetList() {
      this.loading = true;
      let params = {
        date_start: this.paging.date_start,
        date_end: this.paging.date_end,
        store_id: this.paging.staff_id ?  "":this.paging.store_id,
        staff_id: this.paging.staff_id,
        position_id: this.paging.position_id,
      };
      let { code, data } = await this.$Http.techShapeDay(params);
      this.loading = false;
      if (code) {
        this.tableData = data;
      }
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      // var date = new Date();
      // this.paging.month = this.utils.timeMonth(date);
      this.getDate();
      this.handleCurrentChange(1);
    },
    handleCurrentChange(val) {
      this.repairGetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
::v-deep {
  .el-table {
    position: relative;
    overflow: inherit;
  }
  .el-table__footer-wrapper {
    background: #f5f7fa;
    position: absolute;
    top: -50px;
  }
  .el-table__fixed-footer-wrapper tbody td {
    position: absolute;
  }
}
.operation-box {
  margin-bottom: 70px;
}
.operation-box {
  display: flex;
  justify-content: flex-end;
}
</style>